.closable-message {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;

    &.is-open {
        opacity: 1;
        transform: translateY(0);
    }

    &-btn {
        width: 24px;
        height: 24px;
        display: inline-flex;
        margin-right: -8px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;

        .anticon {
            margin-right: 0;
            margin-left: 8px;
            color: inherit;
            font-size: 12px;
            line-height: 24px;
            transition: color 0.2s;
        }

        &:hover .anticon {
            color: var(--text-strong);
        }
    }
}
